<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title th:text="${article.title}"></title>
  <link rel="shortcut icon" href="/img/favicon.ico"/>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/common/layuimini/layuimini.css">
  <link rel="stylesheet" href="/common/layuimini/layui.css" media="all">
  <link rel="stylesheet" href="/common/layuimini/default.css">
  <link rel="stylesheet" href="/common/layuimini/public.css" media="all">
  <link rel="stylesheet" href="/editor/css/editor-style.css"/>
  <link rel="stylesheet" href="/editor/css/editormd.css"/>
  <link href="/editor/css/editormd.preview.css">
  <style type="text/css">
    .article-head {margin: 0 auto; height: 60px;}
    .layui-word-aux {color: #009688}
    body{background-image: url("/img/article/bj.jpg")}
    a{color: #0a001f !important}
  </style>
</head>
<body class="layui-layout-body layuimini-all">

<input type="hidden" th:value="${article.id}" id="articleId">
<div class="layuimini-container article-head" style="margin: 10px auto;text-align: left;height: 60px;">
  <div class="layui-form layui-form-pane">
    <input type="hidden" th:value="${article.allowComment}" id="commentState">
  </div>
</div>

<div class="layuimini-container" style="width: 1000px;margin: 10px auto;text-align: left;background-color: #f8f8f8;border-radius:10px;">
  <div class="layuimini-main">
    <h1 th:text="${article.title}" style=""></h1>
  </div>
  <div class="layuimini-main">
    <a th:text="${article.authorName}"></a>&nbsp;&nbsp;
    <a id="categoryName" style="display: none;" th:text="${article.categoryName == null ? '':article.categoryName}"></a>&nbsp;&nbsp;
    <a th:text="${article.createTime}"></a>&nbsp;&nbsp;
    <div style="margin: 10px auto;" id="articleCategory">
    </div>
  </div>

  <div id="article-main">
    <textarea th:text="${article.content}" id="articleContent"></textarea>
  </div>

  <div class="layuimini-main layui-form" id="comment-form">
    <div class="comment-div">
      <div>
        <div class="layui-inline" style="width: 700px;">
          <input type="text"  name="comment" id="comment" autocomplete="off" placeholder="请输入评论" lay-verify="required" lay-reqtext="请输入评论" class="layui-input">
        </div>
        <div class="layui-inline">
          <button class="layui-btn layui-btn-primary layui-border-blue" lay-submit lay-filter="commentBtn" id="commentBtn">评&nbsp;&nbsp;论</button>
        </div>
      </div>
    </div>
  </div>
  <div class="layuimini-main">
    <div class="comment-div" id="comment-div">
    </div>
  </div>

</div>

</body>
<script type="text/javascript" src="/common/layui/layui.js"></script>
<script type="text/javascript" src="/common/jquery-1.11.3.js"></script>
<script src="/editor/editormd.min.js"></script>
<script src="/editor/lib/marked.min.js"></script>
<script src="/editor/lib/prettify.min.js"></script>
<script src="/editor/lib/raphael.min.js"></script>
<script src="/editor/lib/underscore.min.js"></script>
<script src="/editor/lib/sequence-diagram.min.js"></script>
<script src="/editor/lib/flowchart.min.js"></script>
<script src="/editor/lib/jquery.flowchart.min.js"></script>
<script src="/editor/editormd.js"></script>
<script type="text/javascript" src="/common/layer/layer.js"></script>
<script type="text/javascript">
  window.onload = function () {

    $.ajaxSetup({
      complete:function(XMLHttpRequest,textStatus){
        var redirect = XMLHttpRequest.getResponseHeader("REDIRECT");
        var url= XMLHttpRequest.getResponseHeader("CONTEXTPATH");
        if(redirect == "REDIRECT"){
          window.location.href=url;
        }
      }
    });


    setArticleCategory();
    setCommentState();
    editormd.markdownToHTML("article-main", {
      //可以过滤标签解码
      htmlDecode: "style,script,iframe",
      emoji: true,
      taskList: true,
      tex: true,               // 默认不解析
      flowChart: true,         // 默认不解析
      sequenceDiagram: true,  // 默认不解析
    });
    //查询文章评论
    queryCurrentArticleComment();
  }

  function setArticleCategory() {
    var categoryName = $("#categoryName").html();
    console.log(categoryName);
    if (categoryName != ''){
      var str = '';
      str = str + '<a>分类专栏:</a>'
      var category = categoryName.split(',');
      console.log(category);
      for (var i = 0; i < category.length; i++) {
        str = str + '<span class="layui-badge-rim"><a href="/article/categoty/' + category[i] + '">' + category[i] + '</a></span>'
      }
      $("#articleCategory").html(str);
    }
  }

  function setCommentState() {
    var commentState = $("#commentState").val();
    if (commentState == -1) {
      $("#comment").attr('disabled', 'disabled');
      $("#comment").attr('class', 'layui-input layui-disabled');
      $("#comment").attr('readonly', '');
      $("#commentBtn").hide();
    }
  }

  function hasIllegalChar(str) {
    return new RegExp(".*?script[^>]*?.*?(<\/.*?script.*?>)*", "ig").test(str);
  }

  function queryCurrentArticleComment(){
    var articleId = $("#articleId").val();
    $.ajax({
      url:"/comment/article/getComment",
      data:{
        "articleId": articleId
      },
      type:"post",
      dataType:"json",
      success:function (res){
        var data = res.data;
        console.log(res)
        var str = '';
        for (var i = 0; i < data.length; i++) {
          var currentData = data[i];
          str = str + '<div style="margin: 10px 5px;">\n' +
                  '        <a href="javascript:toUserDetail(\''+currentData.uid+'\')"><span class="comment-username">'+currentData.nickname+'</span></a>\n' +
                  '        <span>:</span>\n' +
                  '        <span>&nbsp;&nbsp;</span>\n' +
                  '        <span style="display:-moz-inline-box; display:inline-block; width:300px;">'+currentData.comments+'</span>\n' +
                  '        <span style="font-size: 12px;">'+(currentData.createTime).substring(0,10)+'</span>\n' +
                  '      </div><hr>';
        }
        $("#comment-div").html(str)
      }
    })
  }

  function toUserDetail(username){
    alert(username);
  }

  layui.use(['form'],function (){
    var form = layui.form;
    form.on('submit(commentBtn)',function (obj){
      var articleId = $("#articleId").val();

      var comments = obj.field.comment;

      var isDanger = hasIllegalChar(comments);
      if (isDanger){
        $.ajax({
          url: "/comment/username/changeUserActive",
          dataType: "json",
          type: "get",
          success: function (res){
            if (res.state){
              layer.msg("连续三次输入非法字符,该账号已锁定,请联系管理员",function (){
                window.location.reload();
              });
            }else {
              layer.msg("注入可耻",{icon:2,time:800})
            }
          }
        })
        return;
      }

      $.ajax({
        url:"/comment/articleDetail/saveComment",
        data:{
          "articleId" : articleId,
          "comment" : obj.field.comment
        },
        dataType: "json",
        type:"post",
        success:function (res){
          console.log("-=-=-=-=-=-=-=-=-=");
          console.log(res);

          if (res.state == true){
            $("#comment").val("");
            layer.msg("评论成功",{icon:1,time:800})
            queryCurrentArticleComment();
          }else {
            if (res.msg == "请先登录"){
              window.open("/login");
              // var index = layer.open({
              //   title: '',
              //   type: 2,
              //   shade: 0.2,
              //   maxmin:false,
              //   shadeClose: true,
              //   anim: 2,
              //   area: ['50%', '300px;'],
              //   content: '/user/login',
              // });
              // window.location.href = "/user/login"
            }else {
              layer.msg(res.msg,{icon:2,time:800})
            }
          }
        }
      })
    })
  })
</script>
</html>
